<script setup lang="ts">
import HeaderNav from '@/components/HeaderNav.vue'
import { getdata } from '@/api/getData'
import { insHis } from '@/api/sendWAns'
import { ref, onMounted } from 'vue'
import { userStatus } from '@/stores/userStatus'
const userStore = ref(userStatus())

// import { useRoute } from 'vue-router'

const examList = ref<
  { ID: number; poem_author: string; poem_dynasty: string; poem_name: string; poem_topics: [] }[]
>([])

const blankIndex = ref<number[]>([])
const ifCorrectAnswer = ref<boolean[]>([])
const hasSubmit = ref(false)
const inputValues = ref<string[]>([])
const wrongAns = ref<number[]>([])



function createRandomIndex() {
  blankIndex.value = []
  inputValues.value = []
  ifCorrectAnswer.value = []
  for (let i = 0; i < examList.value.length; i++) {
    blankIndex.value.push(Math.floor(Math.random() * examList.value[i].poem_topics.length))
    inputValues.value.push('')
    ifCorrectAnswer.value.push(false)
  }
  // console.log(blankIndex.value)
}

function refresh_topic() {
  // createRandomIndex()
  getData1()
  hasSubmit.value = false
}

function submitAns() {
  hasSubmit.value = true
  wrongAns.value = []
  for (let i = 0; i < examList.value.length; i++) {
    // 删除非中文字符
    inputValues.value[i] = inputValues.value[i].replace(/[^\u4e00-\u9fa5]/g, '')

    // 判断输入与答案是否一致
    if (
      examList.value[i].poem_topics[blankIndex.value[i]] == inputValues.value[i] ||
      examList.value[i].poem_topics[blankIndex.value[i]] == inputValues.value[i] + '。'
    ) {
      ifCorrectAnswer.value[i] = true
    } else {
      wrongAns.value.push(examList.value[i].ID)
      // console.log(examList.value[i].ID)
    }
  }
  //这里向后端发送错误的题号
  console.log(wrongAns.value)
  if (userStore.value.hasLogin) {
    insHistory()
  }
}

function getData1() {
  getdata().then((res) => {
    examList.value = res.data
    createRandomIndex()
  })
}

function insHistory() {
  insHis({ WA: wrongAns.value }).then((res) => {
    console.log(res)
  })
}

onMounted(() => {
  refresh_topic()
})
</script>

<template>
  <header>
    <HeaderNav />
  </header>
  <div class="mainPart">
    <div class="exam">
      <div v-for="(item, outerIndex) in examList" :key="outerIndex" class="card">
        <h2>
          {{ item.poem_name }} <span class="jianjie">朝代：{{ item.poem_dynasty }}</span
          ><span class="jianjie">作者：{{ item.poem_author }}</span>
        </h2>
        <div v-for="(topic, index) in item.poem_topics" :key="index" class="topic">
          <span v-if="index === blankIndex[outerIndex]">
            <input
              type="text"
              class="blank"
              placeholder="_____________"
              v-model="inputValues[outerIndex]"
              :class="hasSubmit ? (ifCorrectAnswer[outerIndex] ? 'right' : 'wrong') : ''"
            />
            <span v-if="index === item.poem_topics.length - 1">。</span>
            <span v-else>，</span>
          </span>

          <span v-else
            >{{ topic }}
            <span v-if="index === item.poem_topics.length - 1"></span>
            <span v-else>，</span>
          </span>
        </div>
        <!--  显示是否题目作对 -->
        <span v-if="ifCorrectAnswer[outerIndex] && hasSubmit" style="color: aquamarine">正确</span>
        <span v-else-if="hasSubmit && !ifCorrectAnswer[outerIndex]" style="color: red">错误</span>
      </div>
    </div>
    <div class="menu">
      <el-button type="primary" :onclick="refresh_topic">刷新题目</el-button>
      <el-button type="success" :onclick="submitAns">提交</el-button>
    </div>
  </div>
</template>
<!--  -->
<style scoped>
header {
  width: 100%;
  padding: 0%;
  margin: 0%;
}

.mainPart {
  display: grid;
  position: absolute;
  height: 80%;
  top: 12.5%;
  left: 15%;
  right: 15%;
  justify-content: center;
  align-items: center;
  background-color: antiquewhite;
  grid-template-rows: 8fr 1fr;
  grid-template-columns: 1fr;
  border-radius: 10px;
}
.menu {
  margin: auto;
}
.exam {
  background-color: turquoise;
  margin: 10px;
  height: 90%;
  width: 90%;
  margin: auto;
  overflow: auto;
  /* 优化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
  border-radius: 10px;
}

.topic {
  display: inline-block;
}

.blank {
  border: none;
  background-color: transparent;
  width: 100px; /* 或根据需要调整 */
}

.card {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: white;
}
.right {
  color: greenyellow;
}
.wrong {
  color: red;
}
.jianjie {
  font-size: small;
  color: #888;
  margin: 10px;
}
</style>
